<template>
  <div class="dashboard-container">
    <!-- 车队状态统计 -->
    <div class="stats-section">
      <h2>车队状态</h2>
      <div class="stats-grid">
        <el-card
          v-for="(stat, key) in fleetStats"
          :key="key"
          class="stat-item"
          shadow="hover"
        >
          <div class="stat-value">{{ stat }}</div>
          <div class="stat-label">{{ key }}</div>
        </el-card>
      </div>
    </div>

    <!-- 全局健康状态分布图 和 武器系统战备状态 -->
    <div class="charts-section">
      <div class="chart-container">
        <h2>全局健康状态</h2>
        <div ref="healthChartRef" class="chart-inner"></div>
      </div>
      <div class="chart-container">
        <h2>武器系统战备状态</h2>
        <div ref="weaponChartRef" class="chart-inner"></div>
      </div>
    </div>

    <!-- 关键报警信息 和 当前任务执行情况 -->
    <div class="bottom-section">
      <div class="alerts-container">
        <h2>关键报警信息</h2>
        <el-scrollbar height="300px" class="alerts-scroll">
          <div
            v-for="alert in alerts"
            :key="alert.id"
            class="alert-item"
            :class="alert.level"
          >
            {{ alert.message }}
          </div>
        </el-scrollbar>
      </div>
      <div class="missions-container">
        <h2>当前任务执行情况</h2>
        <div class="mission-item" v-for="mission in missions" :key="mission.id">
          <div class="mission-name">{{ mission.name }}</div>
          <div class="mission-progress">
            <el-progress :percentage="mission.progress" />
          </div>
          <div class="mission-percent">{{ mission.progress }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 车队状态数据
const fleetStats = ref({
  车队总数: 42,
  在线数量: 36,
  任务中数量: 15,
  维修中数量: 6,
});

// 健康状态数据
const healthStatus = ref({
  优秀: 65,
  良好: 20,
  警告: 10,
  严重: 5,
});

// 报警信息
const alerts = ref([
  { id: 1, level: 'critical', message: '车辆001发动机过热' },
  { id: 2, level: 'warning', message: '车辆002油压偏低' },
  { id: 3, level: 'info', message: '车辆003完成自检' },
]);

// 模拟报警信息实时更新
onMounted(() => {
  setInterval(() => {
    if (alerts.value.length > 5) alerts.value.shift();
    alerts.value.push({
      id: Date.now(),
      level: ['info', 'warning', 'critical'][Math.floor(Math.random() * 3)],
      message: `车辆${Math.floor(Math.random() * 100).toString().padStart(3, '0')}随机报警`,
    });
  }, 5000);
});

// 任务状态数据
const missions = ref([
  { id: 1, name: '巡逻任务', progress: 75 },
  { id: 2, name: '运输任务', progress: 30 },
  { id: 3, name: '训练任务', progress: 90 },
]);

// ECharts 图表容器
const healthChartRef = ref(null);
const weaponChartRef = ref(null);

// 初始化全局健康状态饼图
const initHealthChart = () => {
  const chart = echarts.init(healthChartRef.value);
  chart.setOption({
    title: { text: '车辆健康状态分布', left: 'center',top:'-1%', textStyle: { color: '#fff' } },
    tooltip: { trigger: 'item', textStyle: { color: '#fff' } },
    series: [
      {
        name: '健康状态',
        type: 'pie',
        radius: ['40%', '70%'],
        data: Object.entries(healthStatus.value).map(([name, value]) => ({ name, value })),
        color: ['#52c41a', '#faad14', '#fa8c16', '#ff4d4f'],
        label: {
          formatter: '{b}: {c} 辆 ({d}%)',
          textStyle: { color: '#fff' },
        },
        labelLine: { lineStyle: { color: '#fff' } },
      },
    ],
    textStyle: { color: '#fff' },
  });
  window.addEventListener('resize', () => chart.resize());
};

// 初始化武器系统战备状态仪表盘
const initWeaponChart = () => {
  const chart = echarts.init(weaponChartRef.value);
  chart.setOption({
    tooltip: { formatter: '{a} <br/>{b} : {c}%', textStyle: { color: '#fff' } },
    series: [
      {
        name: '战备状态',
        type: 'gauge',
        detail: { formatter: '{value}%', textStyle: { color: '#fff' } },
        data: [{ value: 85, name: '战备率' }],
        axisLine: {
          lineStyle: {
            color: [[0.2, '#ff4d4f'], [0.4, '#faad14'], [0.8, '#52c41a']],
          },
        },
        axisTick: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: '#fff' } },
        axisLabel: { color: '#fff' },
        title: { textStyle: { color: '#fff' } },
      },
    ],
    textStyle: { color: '#fff' },
  });
  window.addEventListener('resize', () => chart.resize());
};

// 页面挂载后初始化图表
onMounted(() => {
  initHealthChart();
  initWeaponChart();
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  color: #fff;
  background-color: #0f1621;
  min-height: 100vh;
}

.stats-section {
  margin-bottom: 30px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-item {
  background: #1a2332 !important;
  text-align: center;
}
.stat-value {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 16px;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.chart-container {
  background: #1a2332;
  padding: 20px;
  border-radius: 8px;
}
.chart-inner {
  width: 100%;
  height: 300px;
}

.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.alerts-container, .missions-container {
  background: #1a2332;
  padding: 20px;
  border-radius: 8px;
}
.alerts-scroll {
  border: none !important;
}
.alert-item {
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}
.alert-item.info {
  background: #2d3748;
}
.alert-item.warning {
  background: #d69e2e;
  color: #000;
}
.alert-item.critical {
  background: #e53e3e;
}
.mission-item {
  display: grid;
  grid-template-columns: 1fr 2fr 50px;
  gap: 10px;
  margin: 10px 0;
  align-items: center;
}
.mission-progress:deep(.el-progress-bar__outer ){
  background-color: #2d3748 !important;
  border-radius: 10px;
}
.mission-progress:deep(.el-progress-bar__inner){
  background-color: #4299e1 !important;
}
.mission-percent {
  text-align: right;
}
</style>